import { Grid, Image, List } from 'antd-mobile';
// import { useUserContext } from '../../hooks/userHooks';
import {
  BellOutline,
  PayCircleOutline,
  UnorderedListOutline,
} from 'antd-mobile-icons';
import { useState } from 'react';
import { useGoTo } from '../../hooks';
import { ROUTE_KEY } from '../../routes/menu';
import style from './index.module.less';

const My = () => {
  const [store, setStore] = useState({
    avatar: '/public/avatar.jpg',
    name: 'Google',
  });
  const student = JSON.parse(localStorage.getItem('Student') || '{}');

  if (student != null) {
    if (student[0].avatar != store.avatar && student[0].name != store.name) {
      setStore(student[0]);
    }
  }

  const { go } = useGoTo();

  const editHandler = () => {
    go(ROUTE_KEY.EDIT_INFO);
  };

  const myCardHandler = () => {
    go(ROUTE_KEY.MY_CARD);
  };

  const myCourseHandler = () => {
    go(ROUTE_KEY.MY_COURSE);
  };

  const orderCourseHandler = () => {
    go(ROUTE_KEY.ORDER_COURSE);
  };

  return (
    <div className={style.container}>
      <Grid columns={10} className={style.grid}>
        <Grid.Item span={4}>
          {student === undefined ? (
            <Image src={store.avatar} alt="请选择头像" className={style.avatar} />
          ) : (
            <Image src={store.avatar} alt="个人头像" className={style.avatar} />
          )}
        </Grid.Item>
        <Grid.Item span={6}>
          <div className={style.name}>{store.name}</div>
          <div className={style.marker} onClick={() => editHandler()}>
            编辑资料
          </div>
        </Grid.Item>
      </Grid>

      <List className={style.list}>
        <List.Item
          prefix={<BellOutline />}
          onClick={() => orderCourseHandler()}
        >
          预约课程
        </List.Item>
        <List.Item
          prefix={<UnorderedListOutline />}
          onClick={() => myCourseHandler()}
        >
          我的课程表
        </List.Item>
        <List.Item
          prefix={<PayCircleOutline />}
          onClick={() => myCardHandler()}
        >
          我的消费卡
        </List.Item>
      </List>
    </div>
  );
};

export default My;
